<template>
  <div class="app-container home image-container">
      <el-row :gutter="24">
        <el-col :span="22" class="imgClass">
          <p class="imgContentLeft">
            {{ formattedDateTime }}
            <br>
            {{weatherInfo}}
          </p>
          <p class="imgContentRight">
            {{ newRightContent }}
          </p>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="position: relative; top: 6%;">
        <el-col :span="24" class="btnClass">
          <ul class="split-align">
            <li v-for="(item, index) in items" :key="index"
                @click="changeBg(index)" :class="[getItemClass(index), activeIndex === index ? 'active-bg' : 'initial-bg']" style="cursor: pointer;">
              {{ item.title }}
            </li>
          </ul>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="content">
        <ul>
          <li><span>驻场运维：{{ zcyw }} 个项目</span></li>
          <li><span>运维面积：{{areaTotal}} 万平方米</span></li>
          <li><span>定期运维：{{ dqyw }} 个项目</span></li>
        </ul>
        <ul>
          <li><span>在线项目：{{ zxxm }} 个项目</span></li>
          <li><span>报警监控：{{ bjjk }} 项</span></li>
          <li><span>报警信息：{{ bjxx }} 个</span></li>
          <li><span>报警工单：{{ bjgd}}个</span></li>
        </ul>
        <ul>
          <li><span>注册人员：{{ userTotal }} 人</span></li>
          <li><span>物业人员：{{ wyry }} 个</span></li>
          <li><span>维护人员：{{  whry}} 人</span></li>
        </ul>
        <ul>
          <li><span>实时工单：{{ ssgd }} 个</span></li>
          <li><span>维修工单：{{ wxgd }} 个</span></li>
          <li><span>挂起工单：{{ gqgd }} 个</span></li>
          <li><span>保养工单：{{ bygd}}个</span></li>
          <li><span>超时工单：{{ csgd}}个</span></li>
          <li><span>巡检工单：{{ xygd}}个</span></li>
        </ul>
      </el-row>
      <div class="realTimeVideo" style="width: 22%;float: left;position: relative;top: 19%;left: 2%;">
        <img src="@/assets/images/timeVideo.png" alt="timeVideo" style="display: block; max-width: 100%; margin: 0 auto" />
      </div>
      <div class="realTimeVideo" style="width: 26%; float:right; position: relative; top: 15%;">
        <!-- 饼图 -->
        <!-- <div ref="pieChart" style="width: 50%;height:160px;"></div> -->
        <!-- 柱状图 -->
        <div ref="barChart" style="width: 100%;height:260px;"></div>
      </div>
      <div class="realTimeVideo" style="width: 24%;float: left;position: relative;top: 46%;left: -19%;">
        <p style="color: red;">项目报警</p>
        <ul v-for="(item, index) in warnList" :key="index" style="list-style: none; margin: 0; padding: 0;">
          <li style="color: #ffffff; font-size: 14px; cursor: pointer;">
            {{ `${index>8?index+1:'0'+index+1} / ${item.project} / ${item.equipment} /` }} <span style="color: red;">{{ item.name }}</span> {{ item.type }} {{ item.date }}
          </li>
        </ul>
        <p style="color: #EDDB06;">通讯报警</p>
        <ul v-for="(item, index) in phoneWarnList" :key="index" style="list-style: none; margin: 0; padding: 0;">
          <li style="color: #ffffff; font-size: 14px; cursor: pointer;">
            {{ `${index>8?index+1:'0'+index+1} / ${item.project} /` }} <span style="color: #EDDB06;">{{ item.name }}</span> {{ item.date }}
          </li>
        </ul>
        <p style="color: #ED8706;">投诉报警</p>
        <ul v-for="(item, index) in phoneWarnList" :key="index" style="list-style: none; margin: 0; padding: 0;">
          <li style="color: #ffffff; font-size: 14px; cursor: pointer;">
            {{ `${index>8?index+1:'0'+index+1} / ${item.project} /` }} <span style="color: #ED8706;">{{ item.name }}</span> {{ item.date }}
          </li>
        </ul>
      </div>
      <div class="realTimeVideo" style="position: relative; top: 10%; width: 70%; height: 800px;left: 16%;">
        <HebeiMap />
      </div>
      <div class="realTimeVideo" :loading="loading" style="width: 11%;float: right;position: relative;top: -11%;left: -13%;">
        <ul v-for="(item, index) in workorderList" :key="index" style="list-style: none; margin: 0; padding: 0;">
          <li style="color: #ffffff; font-size: 14px; cursor: pointer;"  @click="handleImageClick">
            {{ `${index>8?index+1:'0'+index+1} / ${item.workorderId} / ${item.name} /` }}
            <span style="color: #EEAF47;">{{ item.name }} | {{ item.type=='0'?'保养工单':item.type=='1'?'维修工单':item.type=='2'?'巡检工单':'' }}</span>
            <span style="color: #B70000;">{{ item.tag=='11'?'已挂起':item.tag=='12'?'已超时':'' }}</span>
          </li>
        </ul>
      </div>
      <el-row :gutter="24" v-if="carouselData.length > 0" style="width: 100%; position: relative; top: 17%; ">
        <img src="../assets/images/bell.png" />
        <div class="marquee-container" style="width: 95%;">
          <div class="marquee-content">
          <span v-for="(item, index) in carouselData" :key="index" class="marquee-item">
            {{ item.noticeTitle }}
          </span>
          </div>
        </div>
      </el-row>
    <el-dialog v-model="dialogVisible" :title="activeIndex==1?'工单执行流程':activeIndex==0||activeIndex==2?'选择项目':'项目管理'" width="80%"  @close="handleClose" append-to-body class="my-dialog">
      <!-- 对话框内容 -->
      <div v-if="activeIndex==1">
        <h2>1. 运维工单执行流程</h2>
        <p>运维工单是针对设备或系统出现故障时的处理流程，通常涉及问题的快速诊断和修复。</p>
        <ol>
          <li><strong>工单创建：</strong>用户或系统监控自动生成运维工单。工单内容包括问题描述、发生时间、影响范围等。</li>
          <li><strong>工单确认：</strong>运维人员接到工单后确认内容是否清晰，确保能够识别问题。如有疑问，联系用户确认详细信息。</li>
          <li><strong>问题诊断：</strong>运维人员根据工单中的信息进行现场或远程排查。若设备有异常，进行必要的诊断与检测。</li>
          <li><strong>修复与恢复：</strong>根据诊断结果，运维人员进行故障修复，重启设备或系统，恢复服务。记录修复步骤，明确是否更换硬件或更新软件。</li>
          <li><strong>测试与验证：</strong>故障修复后进行全面测试，确保问题已解决，系统正常运行。进行相关的恢复操作，验证修复效果。</li>
          <li><strong>关闭工单：</strong>修复完成并经过验证后，更新工单状态为"已解决"。编写工单总结，记录故障原因和解决方法，提交给相关负责人审核。</li>
          <li><strong>反馈与总结：</strong>向用户反馈问题的修复结果。若存在潜在问题，建议进行预防性措施，避免类似问题再次发生。</li>
        </ol>
        <h2>2. 保养工单执行流程</h2>
        <p>保养工单主要是对设备、系统进行定期的维护和保养，确保其长期稳定运行。</p>
        <ol>
          <li><strong>工单创建：</strong>根据设备保养周期、预定计划或用户要求生成保养工单。工单内容包括保养项目、保养周期、设备信息等。</li>
          <li><strong>工单确认：</strong>运维人员或保养人员接到工单后确认具体的保养内容。检查设备运行状态，确保进入保养周期前设备的正常性。</li>
          <li><strong>设备检查与清洁：</strong>对设备进行检查，清理内部灰尘、杂物，确保通风、散热系统的正常运行。检查设备的电气连接、传感器、指示灯等是否正常。</li>
          <li><strong>功能测试与调试：</strong>检查设备运行的各项功能是否处于正常状态。对设备进行必要的调试，确保其处于最佳工作状态。</li>
          <li><strong>更新与维护：</strong>根据设备需求，进行必要的软件更新或固件升级。更换耗材、清理设备内部部件，补充润滑油、散热液等。</li>
          <li><strong>检查记录与反馈：</strong>记录保养过程，包括检查内容、保养情况、发现的潜在问题等。向管理人员或相关人员反馈保养情况。</li>
          <li><strong>工单关闭：</strong>保养工作完成后，更新工单状态为"已完成"。提交保养报告，完成保养总结，并归档记录。</li>
        </ol>
        <h2>3. 巡检工单执行流程</h2>
        <p>巡检工单主要是对设备、系统等进行定期检查，确保设备处于正常运行状态，及时发现问题。</p>
        <ol>
          <li><strong>工单创建：</strong>根据巡检周期和计划生成巡检工单。工单内容包括巡检设备、巡检范围、巡检项目等。</li>
          <li><strong>工单确认：</strong>运维人员接到工单后确认巡检内容，并准备巡检所需工具、设备。确保巡检所需的技术资料、图纸等资料齐全。</li>
          <li><strong>现场巡检：</strong>按照工单要求，现场检查设备运行状态，包括温度、湿度、电力、警报等。检查设备外观、运行数据和状态指示灯等，确保无异常。</li>
          <li><strong>故障预警与记录：</strong>若在巡检过程中发现异常，立即记录并标明需要进一步处理的问题。若设备存在潜在风险或即将失效，提出预警和整改建议。</li>
          <li><strong>处理问题与修复：</strong>对巡检中发现的小问题进行现场处理，若无法现场修复，则记录并提交进一步修复的工单。</li>
          <li><strong>数据记录与报告：</strong>完成巡检后，记录巡检数据，生成巡检报告。汇总巡检结果，标注已处理的问题和未处理的问题。</li>
          <li><strong>工单关闭：</strong>完成巡检并记录所有数据后，将工单状态更新为"已完成"。提交巡检总结报告，归档工单记录。</li>
        </ol>
        <h2>总结</h2>
        <p>每种工单的执行流程都有其特定的步骤，虽然会有所不同，但整体的核心是：</p>
        <ul>
          <li>创建与确认工单</li>
          <li>执行具体任务（诊断、修复、保养、巡检等）</li>
          <li>记录结果与问题处理</li>
          <li>验证与关闭工单</li>
        </ul>
        <p>确保各工单执行过程中，所有问题能够及时反馈并得到处理，是保证设备正常运行和提高工作效率的关键。</p>
      </div>
      <div v-else-if="activeIndex==0 || activeIndex==2 || activeIndex==4" style="cursor: pointer;">
        <el-row :gutter="24" v-if="activeIndex!=0&&activeIndex!=2" style="padding: 14px 0 0 0; text-align: right;">
          <el-col :span="24">
            <el-button type="text" @click="dialogProjectFormVisible = true">新增项目</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6" v-for="(item, index) in projectInfoList" :key="index">
            <el-card :body-style="{ padding: '0 0 20px 0 !important' }" style="margin-bottom: 10px;background: #1E3153; border: 1px solid #1E3153;">
              <!-- 卡片内容 -->
              <!-- <img src="../assets/images/projectInfoImg.png" alt="prajectInfo" width="100%"/> -->
              <div @click="handleItemInfo(item)">
                <img :src="item.picPathUrl" alt="prajectInfo" width="100%" height="200rpx"/>
                <p style="color: #fff; padding: 0 20px;">
                  {{ item.name }}
                  <img src="../assets/images/indexLogo.png" width="10%" style="float: right;" />
                </p>
                <p style="height: 80px; color: #fff; font-size: 14px; padding: 10px 20px; overflow: auto;">
                  <span>
                    {{ item.description }}
                  </span>
                </p>
                <p style="padding: 10px 20px 0 20px; border-top: 1px solid #E2E2E2; font-size: 14px; color: #fff;">
                  相关人员
                  <span style="float: right;">{{ item.projectUserList.map(item => item.nickName).join(',') }}</span>
                  <p><i class="el-icon-delete" style="color: red;"></i></p>
                </p>
              </div>
              <el-button type="text" v-if="activeIndex!=0&&activeIndex!=2" @click="handleDelete(item)" style="float: right; color: red; padding: 0 20px;"><el-icon><delete /></el-icon></el-button>
            </el-card>
          </el-col>
        </el-row>
        <!-- 分页组件 -->
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
      <ProjectFormDialog v-model:visible="dialogProjectFormVisible" @close="closeDialog" @call-parent-method="getList" />
    </el-dialog>
  </div>
</template>

<script setup name="ProjectInfo" lang="ts">

import ProjectFormDialog from './components/projectFormDialog.vue';
import {
  listProjectInfo,
  delProjectInfo,
  getProjectBaseStatistics,
  getStatisticsWorkorderByDate
} from '@/api/workorder/projectInfo';
import { ref, defineEmits } from 'vue';
import * as echarts from 'echarts';
import type { TabsPaneContext } from 'element-plus'
import { ProjectInfoVO } from '@/api/workorder/projectInfo/types';
import { listNotice } from '@/api/system/notice';
import Cookies from 'js-cookie';
import {deepClone} from "@/utils/index"
import { getWeather, listWorkorderInfo } from '@/api/workorder/workorderInfo';
import HebeiMap from '../components/HebeiMap.vue';

  const { proxy } = getCurrentInstance() as ComponentInternalInstance;

  const router = useRouter();
  const newDate = '2025年03月26日 星期三 01:31';
  const newRightContent = '联系方式：010-51377915  紧急专线：010-51377915';
  // const projectInfoList = ref([]);
  const projectInfoList = ref<ProjectInfoVO[]>([]);
  const ids = ref<Array<string | number>>([]);
  const btnTypeCode = ref(null);

  const items = ref([
    { title: '运维制度'},
    { title: '工作流程'},
    { title: '文档管理'},
    { title: '消息推送'},
    { title: '项目管理'},
    { title: '通讯管理'},
    { title: '用户管理'},
    { title: '角色管理'}
  ]);
  const loading = ref(true);
  const total = ref(0);
  const queryParams = ref({
    pageNum: 1,
    pageSize: 8,
  });
  const newBgUrl = '/src/assets/images/btnBgBack.png';
  const activeIndex = ref(null);
  const dialogVisible = ref(false);
  const dialogProjectFormVisible = ref(false);
  const barChart = ref(null);
  const pieChart = ref(null);

  const emit = defineEmits(['update:visible']);
  const getItemClass = (index) => {
    return index < 4 ? 'left' : 'right';
  };
  const changeBg = (index) => {
    if (activeIndex.value !== index) {
      activeIndex.value = index;
      if (index==5) {
        handleContent();
      } else if (index==0 || index==1 || index==2 || index==4) {
        dialogVisible.value = true;
      } else if (index==3) {
        Cookies.set('displayType', 'system');
        const systemUsertUrl = '/notice';
        // router.push(systemNoticeUrl);
        window.location.href = `${systemUsertUrl}`;
        // window.location.href = `${systemUsertUrl}?displayType=workorder`;
      } else if (index==6) {
        Cookies.set('displayType', 'system');
        const systemUsertUrl = '/system/user';
        // router.push(systemUsertUrl);
        window.location.href = `${systemUsertUrl}`;
        // window.location.href = `${systemUsertUrl}?displayType=system`;
      } else if (index==7) {
        Cookies.set('displayType', 'system');
        const systemUsertUrl = '/system/role';
        // router.push(systemUsertUrl);
        window.location.href = `${systemUsertUrl}`;
      }
    } else if (index==0 || index==1 || index==2 || index==4) {
      dialogVisible.value = true;
    }
  };

  //-----------------------------大屏接口start-------------------------------------//
const zcyw = ref(0);//驻场运维
const dqyw = ref(0);//运维面积
const areaTotal = ref(0);//定期运维

const zxxm = ref(0);//在线项目
const bjjk = ref(0);//报警监控
const bjxx = ref(0);//报警信息
const bjgd = ref(0); //报警工单

const userTotal = ref(0); //注册人数
const wyry = ref(0); //物业人员
const whry = ref(0); //维护人员


const ssgd = ref(0); //实时工单
const gqgd = ref(0); //挂起工单
const csgd = ref(0); //超时工单
const wxgd = ref(0); //维修工单
const bygd = ref(0); //保养工单
const xygd = ref(0); //巡检工单

let barOption = {
  title: {
    text: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '工单数',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20, 30, 15, 25, 35, 45, 55],
    // itemStyle: {
    //   color: function(params) {
    //     return colors[params.dataIndex];
    //   }
    // },
    // animationEasing: 'elasticOut',
    // animationDelay: function (idx) {
    //   return idx * 100;
    // }
    itemStyle: {
      color: new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          {offset: 0, color: '#0EECE4'}, // 渐变起始颜色
          {offset: 1, color: '#058FE7'}  // 渐变结束颜色
        ]
      ),
      barBorderRadius: [6, 6, 0, 0] // 给柱子添加圆角效果
    },
    emphasis: {
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            {offset: 0, color: '#058FE7'}, // 悬停时的渐变起始颜色
            {offset: 1, color: '#0EECE4'}  // 悬停时的渐变结束颜色
          ]
        )
      }
    }
  }],
  // dataZoom:[
  //   {
  //     type: 'inside',  // 内置型数据区域缩放组件
  //     start: 0,  // 数据窗口范围的起始百分比
  //     end: 12  // 数据窗口范围的结束百分比
  //   },
  // ],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
};
const initBarEcharts = async () => {
  const res = await getStatisticsWorkorderByDate();
  if(res.code === 200){

    let baro = deepClone(barOption);
    let nameArr = res.data.map(d=>{
      return d.name;
    })
    let valueArr = res.data.map(d=>{
      return d.value
    })
    baro.xAxis.data = nameArr;
    baro.series[0].data = valueArr;

    const chart = echarts.init(barChart.value)
    chart.setOption(baro)
  }else {
    proxy?.$modal.msgSuccess("获取大屏统计基础数据失败");
  }
};
  const initBaseProjectInfo = async () => {
    const res = await getProjectBaseStatistics();
    if(res.code === 200){
      zcyw.value = res.data.zcyw;
      dqyw.value = res.data.dqyw;
      areaTotal.value = res.data.areaTotal;
      zxxm.value = res.data.zxxm;
      bjjk.value = res.data.bjjk;
      bjxx.value = res.data.bjxx;
      bjgd.value = res.data.bjgd;

      userTotal.value = res.data.userTotal;
      wyry.value = res.data.wyry;
      whry.value = res.data.whry;

      ssgd.value = res.data.ssgd;
      gqgd.value = res.data.gqgd;
      csgd.value = res.data.csgd;
      wxgd.value = res.data.wxgd;
      bygd.value = res.data.bygd;
      xygd.value = res.data.xygd;
    }else {
      proxy?.$modal.msgSuccess("获取大屏统计基础数据失败");
    }
  };

  //-----------------------------大屏接口end-------------------------------------//


  const handleContent = () => {
    Cookies.set('displayType', 'workorder');
    const redirectUrl = '/';
    // router.push(redirectUrl);
    window.location.href = `${redirectUrl}`;
  }
  const getList = async () => {
    loading.value = true;
    const res = await listProjectInfo(queryParams.value);
    projectInfoList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  };
  const closeDialog = () => {
    dialogProjectFormVisible.value = false;
  };
  function handleClose() {
    emit('update:visible', false);
  };
  function handleItemInfo(item) {
    Cookies.set('projectId', item.id);
    Cookies.set('projectName', item.name);
    Cookies.set('displayType', 'workorder');
    // const params = {
    //   id: item.id
    // };
    const paramsUrl = activeIndex.value==0?'/ruleInfo':activeIndex.value==2?'/oss':'/projectInfoPage';
    // router.push({ path: paramsUrl });
    window.location.href = `${paramsUrl}`;
    // router.push({ path: paramsUrl, query: params });
  };
  // 定义每个月的颜色
  const colors = ['#ADD8E6', '#FFFFFF', '#90EE90', '#FF69B4', '#87CEEB', '#FFA500', '#006400', '#FF6700', '#FFFF00', '#FFCC66', '#F0E68C', '#A52A2A'];
  function initBarChart() {
    const chart = echarts.init(barChart.value)
    const option = {
      title: {
        text: '',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: 'Sales',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 30, 15, 25, 35, 45, 55],
        // itemStyle: {
        //   color: function(params) {
        //     return colors[params.dataIndex];
        //   }
        // },
        // animationEasing: 'elasticOut',
        // animationDelay: function (idx) {
        //   return idx * 100;
        // }
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              {offset: 0, color: '#0EECE4'}, // 渐变起始颜色
              {offset: 1, color: '#058FE7'}  // 渐变结束颜色
            ]
          ),
          barBorderRadius: [6, 6, 0, 0] // 给柱子添加圆角效果
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: '#058FE7'}, // 悬停时的渐变起始颜色
                {offset: 1, color: '#0EECE4'}  // 悬停时的渐变结束颜色
              ]
            )
          }
        }
      }],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
    };
    chart.setOption(option)
  };
  // function initPieChart() {
  //   const chart = echarts.init(pieChart.value)
  //   const option = {
  //     title: {
  //       text: '',
  //       left: 'center'
  //     },
  //     tooltip: {
  //       trigger: 'item'
  //     },
  //     series: [
  //       {
  //         name: '访问来源',
  //         type: 'pie',
  //         radius: '50%',
  //         data: [
  //           { value: 1048, name: '搜索引擎' },
  //           { value: 735, name: '直接访问' },
  //           { value: 580, name: '邮件营销' },
  //           { value: 484, name: '联盟广告' },
  //           { value: 300, name: '视频广告' }
  //         ],
  //         emphasis: {
  //           itemStyle: {
  //             shadowBlur: 10,
  //             shadowOffsetX: 0,
  //             shadowColor: 'rgba(0, 0, 0, 0.5)'
  //           }
  //         }
  //       }
  //     ]
  //   }
  //   chart.setOption(option)
  // };
  const warnList = ref([
    { project: '侨福芳草地', equipment: '弱电竖井',  name: '溢水报警', type: '（已转系统工单）',  date: '2024-11-28 16:13'},
    { project: '万达项目', equipment: '电梯',  name: '电梯报警', type: '（已转系统工单）',  date: '2024-112-8 16:13'},
    { project: '长城项目', equipment: '监控摄像头',  name: '摄像头报警', type: '（已转系统工单）',  date: '2024-112-8 16:13'}
  ]);
  const phoneWarnList = ref([
    { project: '科贸大厦',  name: '4G模块通讯报警',  date: '2024-11-28 16:13'},
    { project: '华丰大楼',  name: '烟感报警',  date: '2024-11-28 16:13'}
  ]);
  const workorderList = ref([
    { projectCode: 'XM01-WXGD-20241028-1', equipment: '室外摄像头故障',  name: '已分配', type: '待执行', typeNow:'（已超时）'},
    { projectCode: 'XM01-WXGD-20241028-1', equipment: '室外摄像头故障',  name: '已分配', type: '待执行', typeNow:'（已超时）'},
    { projectCode: 'XM01-WXGD-20241028-1', equipment: '室外摄像头故障',  name: '已分配', type: '待执行', typeNow:'（已超时）'},
    { projectCode: 'XM01-WXGD-20241028-1', equipment: '室外摄像头故障',  name: '已分配', type: '待执行', typeNow:'（已超时）'},
    { projectCode: 'XM01-WXGD-20241028-1', equipment: '室外摄像头故障',  name: '已分配', type: '待执行', typeNow:'（已超时）'},
    { projectCode: 'XM01-WXGD-20241028-1', equipment: '室外摄像头故障',  name: '已分配', type: '待执行', typeNow:'（已超时）'},
    { projectCode: 'XM01-WXGD-20241028-1', equipment: '室外摄像头故障',  name: '已分配', type: '待执行', typeNow:'（已超时）'},
    { projectCode: 'XM01-WXGD-20241028-1', equipment: '室外摄像头故障',  name: '已分配', type: '待执行', typeNow:'（已超时）'}
  ]);
  // 定义一个响应式变量来追踪当前激活的span
  const activeName = ref('first');
  // 定义方法来改变span的颜色
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event);
  };
  /** 删除按钮操作 */
  const handleDelete = async (row?: ProjectInfoVO) => {
    const _ids = row?.id || ids.value;
    await proxy?.$modal.confirm('是否确认删除项目信息编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
    await delProjectInfo(_ids);
    proxy?.$modal.msgSuccess("删除成功");
    await getList();
  };
  const carouselData = ref([]);
  const carouselParams = ref({
    pageNum: 1,
    pageSize: 9999,
    isCarousel: 1
  });
  const getCarouselDataList = async () => {
    const res = await listNotice(carouselParams.value);
    carouselData.value = res.rows;
  };
  const getListWorkorderInfo = async () => {
      loading.value = true;
      // queryParams.value.projectId = projectId;
      try {
          // const res = await listWorkorderInfo(queryParams.value);
          const res = await listWorkorderInfo(queryParams.value);
          workorderList.value = res.rows;
      } finally {
          loading.value = false;
      }
  };
  // 定义响应式变量
  const formattedDateTime = ref("");
  // 格式化时间的函数
  function formatTime(date: Date): string {
    const year = date.getFullYear(); // 年
    const month = String(date.getMonth() + 1).padStart(2, "0"); // 月
    const day = String(date.getDate()).padStart(2, "0"); // 日
    const hours = String(date.getHours()).padStart(2, "0"); // 时
    const minutes = String(date.getMinutes()).padStart(2, "0"); // 分
    const seconds = String(date.getSeconds()).padStart(2, "0"); // 秒
    const weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    const weekDay = weekDays[date.getDay()]; // 星期几
    return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
  }
  //获取天气预报
const weatherInfo = ref("");
const getWeatherInfo = async () => {
  const res = await getWeather();
  weatherInfo.value = res.data.location +" " +res.data.weather +" "+ res.data.temperature;
};
  // 更新时间的函数
  function updateTime() {
    formattedDateTime.value = formatTime(new Date());
  }
  // 定时器
  let timer: number;
  const handleImageClick = (type) => {
    //暂时注释
    // const redirectUrl = '/workorderInfo';
    // router.push({ path: redirectUrl, query: { type } });
};
  onMounted(() => {
    getList();
    getListWorkorderInfo();
    // initBarChart();
    getCarouselDataList();
    // initPieChart();
    initBaseProjectInfo();
    initBarEcharts();
    updateTime();
    getWeatherInfo();
    timer = setInterval(updateTime, 1000);
  });
  onUnmounted(() => {
    // 清除定时器
    clearInterval(timer);
  });
</script>

<style scoped lang="scss">
.image-container {
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/publicHomepage_allBg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.imgClass {
  margin: auto;
  float: left;
  color: #BDE1FB;
  .imgContentLeft {
    position: absolute;
    left: 19%;
    top: 5%;
    font-size: 14px;
  }
  .imgContentCenter {
    position: absolute;
    left: 36%;
    top: 10%;
    p {
      float: right;
      opacity: 1;
      font-size: 23px;
      position: relative;
      left: 20px;
      bottom: 23px;
    }
  }
  .imgContentRight {
    position: absolute;
    right: 11%;
    top: 5%;
    font-size: 14px;
  }
}
.btnClass {
  // margin-top: 40px;
  padding: 0px 7px;
}
.split-align {
  list-style-type: none;
  padding: 0;
}
.split-align li {
  margin-right: 10px;
  text-align: center;
  padding: 7px;
  color: #FFFFFF;
  background-size: cover;
  cursor: pointer;
  font-size: 16px;
}
.split-align li:nth-child(5) {
  margin-right: 0px !important;
}
.split-align .left {
  float: left;
}
.split-align .right {
  float: right;
}
.initial-bg {
  background-image: url('../assets/images/btnBg.png'); /* 初始背景图片路径 */
}
.active-bg {
  background-image: url('../assets/images/btnBgBack.png'); /* 激活后的背景图片路径 */
}
// .list, .listRight {
//   display: flex;
//   list-style: none;
//   padding: 0;
//   margin-left: 0% !important;
// }
// .list li, .listRight li {
//   width: 90px; /* 根据需要调整 */
//   height: 42px; /* 根据需要调整 */
//   background-size: cover;
//   margin-right: 10px; /* 可选，根据需要调整 */
//   text-align: center;
//   padding-top: 10px;
//   color: #FFFFFF;
// }
// .listRight {
//   float: right !important;
//   li:last-child {
//     margin-right: 0 !important;
//   }
// }
.content {
  // margin-top: 10px;
  position: relative;
  top: 9%;
  ul {
    width: 28%;
    list-style-type: none;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    padding-left: 8%;
    li {
      width: 90%;
      // float: left;
    }
  }
  ul:nth-child(2) {
    width: 23% !important;
    margin: 0;
  }
  ul:nth-child(3) {
    width: 20% !important;
    padding-left: 5%;
  }
  ul:nth-child(4) {
    width: 28% !important;
    li {
      width: 50% !important;
      float: left;
    }
  }
  .colContent {
    height: 120px;
    // // opacity: 0.2;
    // background: linear-gradient(180deg, rgba(64, 100, 182, 0.2) 0%, rgba(9, 20, 35, 0.2) 100%);
    // // background: linear-gradient(180deg, rgba(64, 100, 182, 0.1532) 0%, #091423 100%);
    // box-sizing: border-box;
    // border: 3px solid;
    // border-image: linear-gradient(179deg, #00F2FF 4%, rgba(136, 213, 255, 0) 105%) 3;
    // box-shadow: inset 0px -22px 44px 0px #174A94;
    // border-radius: 8px;
    .el-col {
      padding: 6px 0 !important;
      text-align: center;
        font-size: 14px;
      p {
        color: #ffffff;
        text-align: center;
        margin: 0;
      }
    }
  }
}
.spanStyle {
  // padding: 20px 0 !important;
  position: relative;
  // top: 20px;
  p {
    text-align: left !important;
    color: #ffffff;
    padding-bottom: 10px;
    span {
      display: inline-block;
      padding-right: 15px;
    }
  }

}
.ulList {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left;
  li {
    display: inline;
    // float: left;
    color: #FFFFFF;
    padding-right: 5px;
  }
}
// .mapClass {
//   width: 100%;
//   height: 100%;
//   background-image: url('../assets/images/mapImg.png');
//   background-size: 100% 100%;
//   background-position: center;
//   background-repeat: no-repeat;
// }
</style>
<style lang="scss">
// .app-container {
//   .el-dialog,.el-pager li {
//     background-color: rgba(255, 0, 0, 0.0);
//     color: #FFFFFF;
//     background-image: url(../assets/images/dialogBg.png);
//     background-size: cover;
//   }
// }
.my-dialog {
  background-color: rgba(255, 0, 0, 0.0);
	color: #FFFFFF;
  background-image: url(../assets/images/dialogBg.png) !important;
  background-size: cover; /* 根据需要调整 */
  background-repeat: no-repeat;
  border-bottom: 2px solid #3899F6 !important;
  position: relative;
  // top: -10%;
  // background-position: center; /* 根据需要调整 */
  .el-dialog__header {
    padding-top: 10px !important;
    background-color:rgb(255,255,255,0);
    border-radius: 14px 14px  0  0 ;
    border-bottom: none !important;
    .el-dialog__title {
      position: relative;
      top: -15px;
      color: #fff !important;
    }
  }
  .el-dialog__body {
    border-top: 0 !important;
    background-color: rgba(19, 31, 59, 0);
    color: #FFFFFF;
  }
  .el-dialog__footer{
    text-align: center;
    background-color: rgba(255,255,255,0);
  }
}
.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(0, 121, 255, 0.1) 0%, rgba(20, 132, 254, 0.647) 46%, rgba(0, 121, 255, 0.1) 100%);
  padding: 2px 0;
}

.marquee-content {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

.marquee-item {
  // margin-right: 20px;
  margin-right: 40%;
  font-size: 14px;
  // color: #333;
  color: #BDE1FB;
}

/* 定义动画 */
@keyframes marquee {
  0% {
    transform: translateX(80%);
  }
  100% {
    transform: translateX(-80%);
  }
}
</style>
